<template>
  <div class="adapt_body_box">
    <div class="adapt-border">
      <div class="home-page-root">
        <!-- 背景 -->
        <div class="page-bgc"></div>
        <!-- 头部 -->
        <div class="page-header">
          <div class="page-header-warpper">
            <!-- 菜单按钮 -->
            <div class="left" @click="toggleNav">
            </div>
            <!-- 面包屑 -->
            <!-- <div class="nav-breadcrumb">
              <a class="home-icon" href="https://mc-wuchuan.gagogroup.cn/screen/screen-1"></a>
              <b style="margin: 0 6px">/</b>
              <a @click="()=>this.$router.push({path:'/'})">生态修复</a>
              <b style="margin: 0 6px">/</b>
              <a>{{$route.meta && $route.meta.title}}</a>
            </div> -->
            <!-- 时钟 -->
            <div class="right">
              <TimeRoll />
              <span class="el-icon-switch-button" @click="logoutHandler"></span>
            </div>
          </div>
        </div>
        <!-- 菜单 -->
        <div class="page-nav">
          <menu-nav ref="nav" v-if="isShowMenu"></menu-nav>
        </div>
        <!-- 路由 -->
        <div class="page-body">
          <router-view @closeMenu="closeMenu" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 时钟组件
import TimeRoll from '@/components/TimeRoll';
// 地图组件
import MapView from "@/components/yc/MapView";
// 菜单组件
import MenuNav from "@/components/MenuNav"
import { setContainerLocation } from "@/utils/yc/containerLocation"
export default {
  props: {},
  data () {
    return {
      view: null,//地图对象
      isShowMenu: false
    }
  },
  components: {
    TimeRoll,
    MenuNav,
    MapView
  },
  methods: {
    /**
     * 初始化地图对象
     */
    initMapViewHandler (evt) {
      this.view = evt;
    },
    // dom元素缩放
    setScale (dom) {
      let mapDom = document.querySelector(".map-root")
      let height = parseFloat(dom.getBoundingClientRect().height);
      let width = parseFloat(dom.getBoundingClientRect().width);

      const winW = window.innerWidth;
      const winH = window.innerHeight;
      const scaleX = winW / 1920;
      const scaleY = winH / 1080;
      dom.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';

      setContainerLocation(mapDom, height, width)
    },
    // 监听窗口缩放
    resizeScale () {
      const dom = document.querySelector('.adapt-border');
      this.setScale(dom)
      window.addEventListener('resize', () => {
        this.setScale(dom);
      }, false);
    },
    // 菜单展开收起
    toggleNav(){
      this.isShowMenu = !this.isShowMenu;
    },
    // 关闭菜单
    closeMenu(){
      this.isShowMenu = false
    },
    // 退出登录
    logoutHandler(){
      this.$store.dispatch('SingleLogOut')
        .then(() => {
          window.location.href = `${process.env.VUE_APP_SINGLE_URL}?redirect=${window.location.origin}${window.location.pathname}`
        })
        .catch(()=>{
          window.location.href = `${process.env.VUE_APP_SINGLE_URL}?redirect=${window.location.origin}${window.location.pathname}`
        })
    }
  },
  mounted () {
    // this.resizeScale();
  }
}
</script>
<style lang="scss">
@import "~@/assets/styles/cover.scss";
</style>
<style scoped lang="scss">
$full: 100%;
.adapt_body_box {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden visible;
  .adapt-border {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: left top;
    // height: 1080px;
    // width: 1920px;
    height: 100%;
    width: 100%;
    transform: scale(1, 1);
  }
}
.home-page-root {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

  .page-bgc {
    position: absolute;
    height: $full;
    width: $full;
    background: url("~@/assets/header/vwuchuanHeaderBackground.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
  }

  .page-header {
    position: absolute;
    top: 0;
    left: 0;
    width: $full;
    height: 64px;
    z-index: 10;
    padding: 0 12px;

    .page-header-warpper {
      height: $full;
      width: $full;
      background: url("~@/assets/header/top-bg.png") no-repeat;
      background-size: 100% 100%;

      .left {
        cursor: pointer;
        color: rgb(64, 239, 255);
        font-size: 24px;
        width: 80px;
        height: 52px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 99;
        background: url("~@/assets/header/menu-icon.png") no-repeat;
        background-size: 100% 100%;

        &:hover {
          background-image: url("~@/assets/header/menu-hover.png");
        }
      }

      .nav-breadcrumb {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 20;
        top: 12px;
        left: 97px;
        color: rgb(184, 255, 220);
        font-size: 16px;
        .home-icon {
          display: inline-block;
          height: 30px;
          width: 30px;
          left: 4px;
          top: -5px;
          cursor: pointer;
          background: url("~@/assets/header/home.svg") no-repeat;
          background-size: 100% 100%;
        }
        a:last-child {
          color: rgb(255, 227, 57);
          cursor: auto;
        }
        a {
          line-height: 30px;
        }
      }

      .right {
        position: absolute;
        right: 24px;
        top: 16px;
        font-size: 25px;

        .el-icon-switch-button {
          color: rgb(184, 255, 220);
          font-weight: 500;
          margin-left: 16px;
          cursor: pointer;
        }
      }
    }
  }

  .page-nav {
    position: absolute;
    z-index: 9;
    height: 100%;
  }

  .page-map {
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .page-body {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: $full;
    height: $full;
  }
}
</style>
